<template>
	<div class="body_box">
		<div class="content">
				<div class="top">
					<img src="/static/img/mine/portrait.png" class="left"/>
					<div class="center">
						<h2 class="perfect">完善信息＞</h2>
						<a class="gift">领取新人福利</a>
					</div>
					<div class="right">
						<a href="javascript:;" @click="setting" class="setting"></a>
						<a class="tobevip"></a>
					</div>
				</div>
				<div class="nav1">
					<a class="a coupon"><span class="span">3</span>优惠券(张)</a>
					<a class="a wallet"><span class="span">100</span>健康币(个)
						<div class="orange">
							签到领福利
						</div>
					</a>
					<a class="a wallet"><span class="span">0.00</span>健康账户(元)</a>
				</div>
				<div class="nav2">
					<a @click="go1" class="a"><img src="/static/img/mine/icon-book.png" class="img"/>我的预约</a>
					<a @click="go2" class="a"><img src="/static/img/mine/icon-consult.png" class="img"/>我的问诊</a>
					<a @click="go3" class="a"><img src="/static/img/mine/icon-order.png" class="img"/>服务订单</a>
					<a @click="go4" class="a"><img src="/static/img/mine/icon-order2.png" class="img"/>商品订单</a>
				</div>
				<div class="tool">
					<h2 class="tool_title">常用工具</h2>
					<ul class="ul">
						<li class="li"><a class="a"><img src="/static/img/mine/icon-patients.png" class="img"/>家庭联系人</a></li>
						<li class="li"><a class="a"><img src="/static/img/mine/icon-star.png" class="img"/>关注收藏</a></li>
						<li class="li"><a class="a"><img src="/static/img/mine/icon-doctor.png" class="img"/>我的医生</a></li>
						<li class="li"><a class="a"><img src="/static/img/mine/icon-apply.png" class="img"/>我的申请</a></li>
						<li class="li"><a class="a"><img src="/static/img/mine/icon-sns.png" class="img"/>健康号</a></li>
						<li class="li"><a class="a"><img src="/static/img/mine/icon-sns.png" class="img"/>我的频道</a></li>
						<li class="li"><a class="a"><img src="/static/img/mine/icon-sns.png" class="img"/>我的课程</a></li>
						<li class="li"><a class="a"><img src="/static/img/mine/icon-sns.png" class="img"/>我的课程</a></li>
					</ul>
				</div>
				<div class="archives">
					<h2 class="archives_title">健康档案</h2>
					<img src="/static/img/mine/empty-new.png" class="img"/>
					<div class="tip">请添加联系人，进行健康档案管理</div>
					<a class="add">添加家庭联系人</a>
				</div>
				<div class="kong"></div>
			</div>
		<Foot></Foot>
	</div>
</template>

<script>
	import Foot from "../components/commons/Foot"
	export default {
		components:{
		  	Foot
		  },
		methods:{
		  	go1:function(){
		  		this.$router.push(`/yuyue`);
		  	},
		  	go2:function(){
		  		this.$router.push(`/wenzhen`);
		  	},
		  	go3:function(){
		  		this.$router.push(`/fuwu`);
		  	},
		  	go4:function(){
		  		this.$router.push(`/shangpin`);
		  	},
		  	setting:function(){
		  		this.$router.push(`/acctset`);
		  	}
		}
	}
</script>

<style scoped>
	.body_box{height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;}
	.content {
		flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
  background: #f5f6f6; }
  .content .top {
    height: 1.25rem;
    background: url(/static/img/mine/bg.png) #fff no-repeat;
    background-size: 100% 100%;
    overflow: hidden; }
    .content .top .left {
      width: 0.55rem;
      height: 0.55rem;
      margin-left: 0.12rem;
      margin-top: 0.42rem;
      display: block;
      float: left; }
    .content .top .center {
      float: left;
      margin-left: 0.1rem;
      margin-top: 0.42rem; }
      .content .top .center .perfect {
        font-size: 0.14rem;
        color: #fff; }
      .content .top .center .gift {
        display: block;
        color: #fff;
        height: 0.25rem;
        font-size: 0.09rem;
        margin-top: 0.05rem; }
      .content .top .center .gift:before {
        content: " ";
        display: block;
        border-radius: 50%;
        float: left;
        width: 0.18rem;
        height: 0.18rem;
        background: url(/static/img/mine/gift.gif);
        background-size: 100%;
        margin-right: 0.02rem; }
    .content .top .right {
      float: right;
      margin-top: 0.1rem; }
      .content .top .right .setting {
        width: 0.22rem;
        height: 0.22rem;
        background: url(/static/img/mine/icon-set.png);
        display: block;
        background-size: 100%;
        margin-bottom: 0.13rem; }
      .content .top .right .tobevip {
        width: 0.71rem;
        height: 0.56rem;
        background: url(/static/img/mine/vip-tobe.png);
        display: block;
        background-size: 100%; }
  .content .nav1 {
    background: #fff;
    height: 0.85rem;
    display: flex;
    align-items: center; }
    .content .nav1 .a {
      width: 33.3333333%;
      color: #83889a;
      text-align: center;
      font-size: 0.1rem; }
      .content .nav1 .a .span {
        color: #333;
        font-size: 0.15rem;
        margin-bottom: 0.04rem;
        display: block; }
    .content .nav1 .wallet {
      position: relative; }
      .content .nav1 .wallet .orange {
        display: block;
        background: #fe9405;
        width: 0.8rem;
        height: 0.15rem;
        color: #fff;
        font-size: 0.09rem;
        position: absolute;
        bottom: -0.2rem;
        left: 0.2rem;
        animation: myfirst 2s;
        animation-fill-mode: both;
        animation-iteration-count: infinite; }
      .content .nav1 .wallet .orange:before {
        content: ' ';
        width: 0;
        height: 0;
        display: inline;
        border: .05rem solid transparent;
        border-bottom-color: #fe9405;
        position: absolute;
        bottom: 0.15rem;
        left: 0.3rem; }
@keyframes myfirst {
  0%, 100%, 20%, 50%, 80% {
    transform: translate3d(0, 2px, 0); }
  40%, 43% {
    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);
    transform: translate3d(0, -6px, 0); }
  70% {
    transform: translate3d(0, -2px, 0); } }
  .content .nav2 {
    margin: 0.08rem 0;
    height: 0.85rem;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center; }
    .content .nav2 .a {
      width: 25%;
      text-align: center;
      color: #83889a;
      font-size: 0.1rem; }
      .content .nav2 .a .img {
        width: 0.3rem;
        height: 0.3rem;
        display: block;
        margin: 0 auto;
        margin-bottom: 0.04rem; }
  .content .tool {
    background: #fff; }
    .content .tool .tool_title {
      line-height: 0.39rem;
      text-align: center;
      font-size: 0.13rem;
      color: #83889a; }
    .content .tool .ul {
      overflow: hidden; }
      .content .tool .ul .li {
        float: left;
        width: 25%;
        height: 0.8rem;
        border-top: 1px solid #eee;
        display: flex;
        align-items: center; }
        .content .tool .ul .li .a {
          color: #83889a;
          font-size: 0.1rem;
          text-align: center;
          display: block;
          width: 100%; }
          .content .tool .ul .li .a .img {
            width: 0.3rem;
            height: 0.3rem;
            display: block;
            margin: 0 auto; }
  .content .archives {
    background: #fff;
    margin-top: 0.08rem;
    overflow: hidden; }
    .content .archives .archives_title {
      line-height: 0.39rem;
      text-align: center;
      font-size: 0.13rem;
      color: #83889a;
      border-bottom: 1px solid #eee; }
    .content .archives .img {
      width: 0.57rem;
      height: 0.57rem;
      display: block;
      margin: 0.1rem auto; }
    .content .archives .tip {
      text-align: center;
      color: #999;
      font-size: 0.1rem; }
    .content .archives .add {
      color: #3f86ff;
      border: 1px solid #3f86ff;
      width: 1.29rem;
      height: 0.35rem;
      text-align: center;
      display: block;
      margin: 0.2rem auto;
      line-height: 0.35rem;
      border-radius: 0.15rem; }
  .content .kong {
    height: 0.08rem; }

</style>
